<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			html,body{
				height:100%;
			}
			body {
				font-size: 12px;
			}
			#main {
				width: 800px;
				height: auto;
				overflow: hidden;
				z-index: 1;
				margin:10px auto;
			}
			#main #head_p {
				text-align: center;
				font-size: 30px;
				font-weight: bold;
				padding: 10px 0px;
			}
			#d1 {
				height: 50px;
				text-align: center;
				line-height: 50px;
			}
			/*对input标签中type属性值为button的元素进行过滤*/
			
			input[type="button"] {
				background-color: #34b;
				border: 1px solid #666;
				border-radius: 5px;
				color: #DDFFCC;
				font-size: 12px;
				/*margin-left: 10px;*/
				
				padding: 2px 5px;
				letter-spacing: 3px;
				margin: auto;
				font-family: "微软雅黑";
				cursor: pointer;
			}
			input[type="button"]:hover {
				background-color: #45B0BA;
			}
			#tr1 {
				background-color: #45B0BA;
				font-weight: 900;
				height: 30px;
				table-layout: fixed;
			}
			#t1 {
				width: 100%;
				height: auto;
				border-collapse: collapse;
			}
			#t1 td {
				border: 1px solid #5B5B5B;
				padding: 5px 0px;
			}
			#t1 tr {
				text-align: center;
			}
			#tb1 tr:hover {
				background-color: #aaa;
				font-weight: bold;
				color: #fff;
				cursor: pointer;
			}
			/*奇数行的样式*/
			
			.oddType {
				background: #ddffcc;
			}
			/*偶数行的样式*/
			
			.evenType {
				background: #adddea;
			}
			#d2 {
				text-align: center;
				padding-top: 20px;
			}
			.overAll {
				position: absolute;
				z-index: 100;
				background-color: #ccc;
				/*调整透明度*/
				
				opacity: 0.5;
				/*兼容IE8之前的版本*/
				
				filter: alpha(opacity=50);
			}
			.childDiv {
				padding: 20px 30px;
				width: 300px;
				height: auto;
				overflow: hidden;
				border: 2px solid #ccc;
				background-color: #fff;
				margin-left: auto;
				margin-right: auto;
				position: absolute;
				z-index: 400;
				top: 100px;
			}
			#show #show_p {
				text-align: center;
				font-size: 18px;
				font-weight: bold;
			}
			#show #show_table {
				margin-left: auto;
				margin-right: auto;
				border-spacing: 10px;
			}
			#show .showBtn {
				text-align: center;
			}
			#show_tbody input {
				border: 1px solid #666666;
			}

			#over{
				width: 100%;
				height: 100%;
				background-color: rgba(123, 123, 123, 0.5);  
				/* background-color: #ccc; */
				position:absolute;
				left:0;
				top:0;
				/* 设置元素的透明度 */
				/* opacity: 0.5; */
				display: none;

			}

		.container{
			width:300px;
			height:400px;
			border-radius: 5px;
			background-color:white;	
			position: relative;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			padding:10px;		 
		}
		.container input[type='text']{
			width:80%;
			height:35px;
			margin:5px 0px;
			border:1px solid black;
		}
		.container input[type=button]{
			width:45%;
			height: 35px;
		}

		 
		</style>
		 
	</head>

	<body>
		 
		<div id="main">
			<p id="head_p">动态表格案例</p>
			<p id="d1">
				学号:
				<input type="text" value='2020' id="sid" /> 姓名:
				<input type="text" value='好人' id="name" /> 性别:
				<input type="text" value='男' id="gender" />
				<input type="button" id="add"  value="增加" />

			</p>
			<hr>
				<table id="t1">
					<tr id="tr1">
						<td width="40px">选择</td>
						<td width="60px">学号</td>
						<td width="60px">姓名</td>
						<td width="40px">性别</td>
						<td width="270px">操作</td>
					</tr>
					<tbody id="tb1">
						<!-- <tr>
							<td>
								<input type="checkbox" />
							</td>
							<td>1001</td>
							<td>haoren</td>
							<td>F</td>
							<td>
								<input type="button" value="删除"   />
								<input type="button" id="modify" value="修改" />
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" />
							</td>
							<td>1002</td>
							<td>jerry</td>
							<td>F</td>
							<td>
								<input type="button" value="删除"  />
								<input type="button" id="modify" value="修改" />
							</td>
						</tr> -->
					</tbody>
				</table>
			<p id="d2">

				<input type="button" value="全&nbsp;&nbsp;选" id="ck1"  />
				<input type="button" value="反&nbsp;&nbsp;选" id="ck2"  />
				<input type="button" value="全部删除" id='delAll' />
				<input type="button" value="删除所选" id="delSelected" />
			</p>


		</div>
	   
		<!-- 遮罩层 -->
		<div id="over">
			<div class="container">
				学号: <input type="text"><br>
				姓名: <input type="text"><br>
				性别: <input type="text"><br>
				<input type="button" value='取消'> 
				<input type="button" value='确定'>
				
			</div>
		</div>

		<script>
		//$合法的函数名（自定义）
		let $=function(id){
			return document.getElementById(id);
        }
        
        //自定义的一个函数创建一个新的节点
        let createNode=function(tagName,content){ 
			if(content==undefined){
				return document.createElement(tagName);
			}else{
				let node= document.createElement(tagName);
				node.innerHTML=content;
				return node;
		    }
        }

		//全部删除
		$('delAll').onclick=function(){
			$('tb1').innerHTML='';
		}
       
	    //全选功能
		$('ck1').onclick=function(){
           //1. 获得tbody中所有的input
		  let inputs= $('tb1').getElementsByTagName('input');
		   //2. 获得checkbox
		  for (let input of inputs) {
			  if(input.type=='checkbox'){
				  //将复选框设置为被选中的状态
                  input.checked=true;
			  }		  
		  }
		}

		//删除所选
		$('delSelected').onclick=function(){
		  //1. 获得tbody中所有的input
		  let inputs= $('tb1').getElementsByTagName('input');
		  //2. 获得checkbox
		  for (let i=inputs.length-1;i>=0;i--) {  //for(let input of inputs)
			  let input=inputs[i];
			   //获得被选中的复选框
			  if(input.type=='checkbox' && input.checked){
				 //获得input的当前行tr
				 let tr= input.parentNode.parentNode;
				 //从tbody中将tr进行移除
				 $('tb1').removeChild(tr);
 
			  }		  
		  }
		}

		//反选的功能
		$('ck2').onclick=function(){
		  //1. 获得tbody中所有的input
		  let inputs= $('tb1').getElementsByTagName('input');
		   //2. 获得checkbox
		  for (let input of inputs) {
			  if(input.type=='checkbox'){
				  //将复选框设置为被选中的状态
				//   if(input.checked){
				// 	input.checked=false;
				//   }else{
				// 	input.checked=true;
				//   }
				input.checked=!input.checked;
                 
			  }		  
		  }
		}
        
		//修改元素
		let modify=function(){
           //1.将over元素进行显示
		   $('over').style.display='block';
		}

		//声明一个数组存储内容
		let content=[];
        //读取用户输入的内容
		let readInputValues=function(){
            //content=[];
			//每次都对content中的数据进行清除
			content.splice(0,3);
			//获得p1对象
			let p=$('d1');
			//获得#d1中所有的input元素
			let inputs=p.getElementsByTagName('input');
			for(input of inputs){
				//获得type=text的input对象
				if(input.type==='text'){
					console.log(input.value);
					content.push(input.value);
				}
			}
            
		}

		let createTr=function(){
			//1. 判断content是否有数据
			if(content.length!=3){
				//直接终止函数的执行
				confirm("请输入内容!");
				return;
			}
			//2. 创建节点
			let tr=createNode('tr');
			//创建td
			//let checkboxTd=createNode('td',`<input type='checkbox'>`);
			let checkboxTd=createNode('td');
			let inputCheckBox=createNode('input');
			//设置为复选框
			inputCheckBox.type='checkbox';
			//将checkbox追加到checkboxTd中
			checkboxTd.appendChild(inputCheckBox);
			let sidTd=createNode('td',content[0]);
			let nameTd=createNode('td',content[1]);
			let genderTd=createNode('td',content[2]);
			let btnTd=createNode('td',`<input type="button" onclick='delRow(this)' value="删除" /> <input type="button" value="修改" onclick='modify()' />`);
			//将td作为tr的字节的
			tr.appendChild(checkboxTd);
			tr.appendChild(sidTd);
			tr.appendChild(nameTd);
			tr.appendChild(genderTd);
			tr.appendChild(btnTd);
			//定位tbody
			let tbody=$('tb1');
			//将tr追加到tbody中
			tbody.appendChild(tr);

			

		}

		let delRow=function(obj){
		  //进行二次确认
		  //confirm是浏览器内置的一个确认函数
		  let flag=confirm('确定删除该行数据吗');
		  //console.log(flag);
		  if(flag){
			//console.log('--------',obj);
			//获得tr,obj表示当前的按钮
			//obj.parentNode表示td
			//obj.parentNode.parentNode表示tr
			let tr=obj.parentNode.parentNode;
			//console.log(tr);
			$('tb1').removeChild(tr);
		 }
		}


		//为add按钮绑定单击事件
		$('add').onclick=function(){
			//1. 读取用户输入的内容
			readInputValues();
			//2. 创建节点
			createTr();

		}
		</script>
		 
	</body>

</html>